<template>
  <div>
    <HeaderPage />
    <h2>Welcome to the Home Page</h2>
    <p>Message: {{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import HeaderPage from '../components/HeaderPage.vue';

export default {
  name: 'HomePage',
  components: { HeaderPage },
  computed: {
    ...mapState(['message']),
  },
  methods: {
    ...mapMutations(['updateMessage']),
    changeMessage() {
      this.updateMessage('New Message from Home Page!');
    },
  },
};
</script>

<style scoped>
h2 {
  color: #42b983;
}
</style>
